<template>
    <div class="index" style="width: 100%;margin-top: 3%;">
        <!-- 返回按钮 -->
        <div class="back-btn-container">
            <button class="back-btn" @click="goBack">
                <i class="el-icon-arrow-left"></i>
                <span>返回</span>
            </button>
        </div>
        <div class="main" style="min-height:700px; width: 100%; text-align: center; position: relative;">
            <p style="padding-top: 30px;font-size: 30px;font-family: '宋体', SimSun;">房型</p>
            <el-row :gutter="20"> <!-- 设置列间距为 20px -->
                <el-col :span="12" v-for="item in RoomDTO.slice(0, 10)" :key="item.id">
                    <div class="allroomtype">
                        <!-- <div class="allroomtypejpg">图片1</div> -->
                        <img class="allroomtypejpg" :src="item.picture" />
                        <div class="allroomtypetext">
                            <div class="allroomtypename">
                                <div class="p1">{{ item.roomName }}</div>
                            </div>
                            <div class="allroomtypeprice">
                                <div class="p2">现价 ¥{{ item.price }}</div>
                            </div>
                            <el-button size="large" type="warning" plain round
                                @click="goToDetailPage(item.id)">点击查看详细</el-button>
                            <div class="watermark">睿雅酒店</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>



<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import api from '@/api';

// 使用useRouter钩子获取router实例
const router = useRouter();

const RoomDTO = ref([]); //返回给前端的数据

onMounted(() => {
    api.getAllRoomInPage().then(res => {
        console.log("1111112222", res.data.data.list)
        RoomDTO.value = res.data.data.list
        console.log("123", RoomDTO.value)
    })
})

// 导航到AllRoomType
function goToDetailPage(id) {
    router.push({
        path: '/room/DetailPage',
        query: {
            id
        }
    });
}

//返回上一页
const goBack = () => {
    router.go(-1); // -1表示返回上一页
};
</script>



<style scoped>
/* 身体部分 */
/* 确保宽度计算包括padding和border，避免超出 */
* {
    box-sizing: border-box;
}

.main {
    /* background-color: rgb(26, 255, 0); */
}

.main .allroomtype {
    border: solid;
    border-color: orange;
    width: 100%;
    /* 宽度设置为100%，由gutter控制间距 */
    height: auto;
    display: flex;
    margin-top: 25px;
}

.allroomtype .allroomtypejpg {
    /* background-color: blue; */
    width: 50%;
    height: 300px;
    /* margin-bottom: 10px; */
}

.allroomtype .allroomtypetext {
    width: 50%;
    height: 300px;
    display: flex;
    flex-direction: column;
    /* 让子元素垂直排列 */
    align-items: center;
    /* 仅水平居中，子元素贴近容器顶部 */
    position: relative;
}

.allroomtypetext .allroomtypename {
    width: 100%;
    height: 70px;
    margin-top: 45px;
    /* 使 allroomtypename 稍微远离顶部 */
    margin-bottom: 30px;
    /* 增加 allroomtypename 和 allroomtypeprice 的间距 */
    display: flex;
    /* 使用flex布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    text-align: center;
    /* 如果需要，确保文本居中（对于单行文本，flex布局已经足够） */
}

.allroomtypename .p1 {
    font-size: 40px;
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: 15px;
}

.allroomtypetext .allroomtypeprice {
    background-color: orange;
    width: 100%;
    height: 60px;
    margin-bottom: 30px;
    /* 增加 allroomtypename 和 查看详细按钮 的间距 */
    display: flex;
    /* 使用flex布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    text-align: center;
    /* 如果需要，确保文本居中（对于单行文本，flex布局已经足够） */
}

.allroomtypeprice .p2 {
    font-size: 25px;
    color: white;
}

.allroomtypetext .watermark {
    font-size: 15px;
    color: gray;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* 返回按钮容器 */
.back-btn-container {
    position: absolute;
    left: 20px;
    top: 80px;
    z-index: 10;
}

/* 返回按钮样式 */
.back-btn {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    background-color: #f8f8f8;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: #555;
}

.back-btn i {
    margin-right: 5px;
    font-size: 16px;
}

.back-btn:hover {
    background-color: #e6f7ff;
    border-color: #91d5ff;
    color: #1890ff;
    transform: translateX(-3px);
}

.back-btn:active {
    transform: translateX(0);
}

/*整个页面留白*/
@media (max-width: 768px) {
    .myCenter {
        width: 100%
            /* 减少留白 */
    }
}

@media (max-width: 980px) {
    .myCenter {
        width: 100%
            /* 移除留白 */
    }
}
</style>